<template>
  <div class="rent-remind">
    <info-grid :data-list="dataSource" :col-span="colSpan" :gutter="10" />
  </div>
</template>

<script>
import { setListDataValueWidthKey } from '@gis/lib/utils/index.js';
import { realityHouseRentRemind } from '@gis/lib/api';
import areaCodeMixin from '@gis/lib/mixins/areaCodeMixin.js';
import InfoGrid from '@/components/info-grid.vue';
import { getPercent } from '@gis/lib/utils/index.js';
export default {
  name: 'rent-remind',
  components: { InfoGrid },
  mixins: [areaCodeMixin],
  props: {
    value: { type: [String, Number], default: undefined },
    colSpan: { type: [String, Number], default: 6 },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        this.getDataObjAsync(Object.assign({}, this.apiParams, { yard_id: val }));
      },
    },
  },
  data() {
    return {
      dataSource: [
        { label: '租住逾期', value: 0, key: 'cq', color: '#FC6820' },
        { label: '租住临期', value: 0, key: 'lq', color: '#FCB720' },
        { label: '今日处理', value: 0, key: 'jrcl', color: '#14FF9E' },
        {
          label: '今日处置率',
          value: 0,
          key: 'czl',
          suffix: '%',
          color: '#1E92FF',
        },
      ],
    };
  },
  methods: {
    async getDataObjAsync(params) {
      const { data = [] } = await realityHouseRentRemind(params);
      if (!data || !data.length) return;
      let jrcl = data.find((item) => item.name == 'jrcl');
      let czl = getPercent(jrcl.value, data, null, (item) => item.value);
      this.dataSource = setListDataValueWidthKey(
        this.dataSource,
        data.reduce(
          (res, item) => {
            return Object.assign({}, res, { [item.name]: item.value });
          },
          { czl: czl || 0 },
        ),
      );
    },
  },
};
</script>

<style scoped lang="less">
.rent-remind {
  /deep/.info-grid {
    .grid-item {
      & > p {
        &:first-child {
          font-size: 24px;
          font-weight: 500;
          margin-bottom: 13px;
        }
        &:last-child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
        }
      }
    }
  }
}
</style>
